﻿@using TrainingManagerSystem.WebUI.Models
@model IEnumerable<TrainingManagerSystem.WebUI.TrainingManagerSystemService.CourseDetails>

<div id='body'>
    <link href="@Url.Content("~/Content/Css/jquery.treeview.css")" rel='stylesheet' />
    <link href="@Url.Content("~/Content/Css/jquery.dataTables.css")" rel='stylesheet' />
    <link href="@Url.Content("~/Content/Css/css.accountCourse.css")" rel='stylesheet' />
    <style type="text/css">
        .courseHeadTable_150 {
            width: 150px;
        }

        .courseHeadTable_90 {
            width: 90px;
        }
    </style>
    <div id='content-left' class='float-left'>
        <div class='title-nav'>
            Course Category
        </div>
        <div id='treeWrapper'>
            @{ Html.RenderPartial("_CourseCategoryMenu");}
        </div>
    </div>

    <div id='content-right' class='float-left'>
        <div class="title-view bold">
            View Course
        </div>
        <form action="/" method="post">
            <div class="div-search">
                <table width="100%">
                    <tr>

                        <td class="label">Course name
                        </td>
                        <td class="control-field">
                            <input type="text" id="txtCourseName" />
                        </td>
                        <td class="label">Course year
                        </td>
                        <td class="control-field">
                            <input type="text" id="txtCourseYear" />
                        </td>
                    </tr>
                    <tr>
                        <td>Course End date
                        </td>
                        <td>
                            <input style="width: 75px;" type="text" id="txtstartDate" />
                            >>
                            <input style="width: 75px;" type="text" id="txtendDate" />
                        </td>
                    </tr>
                </table>
            </div>
            <div class="float-right">
                <input type="button" class="btn" value="Search" id="btnSearch" />
            </div>
        </form>
        <div class='clear-fix'>
            <span id='setting'>Table configuration</span>
        </div>
        <div id='list-search'>
            <table class='sortable' id='dataTables'>
                <thead>
                    <tr>
                       
                        <th>Course Name
                        </th>
                       
                        <th >Course Category
                        </th>
                        <th>Course CategoryName
                        </th>
                        <th >Course Year
                        </th>
                        <th>Start Date
                        </th>
                        <th >End Date
                        </th>
                        <th >Costs
                        </th>
                        <th >Currency
                        </th>
                        <th >Time Commit
                        </th>
                        <th >Trained Duration
                        </th>
                        <th>Note
                        </th>

                    </tr>
                </thead>
                <tbody>
                    @foreach (var m in Model)
                    {
                        <tr>
                           
                            <td><a class='acc' href='javascript:;'>@m.CourseName</a></td>
                           
                            <td>@m.CourseCategory</td>
                            <td>@m.CourseCategoryName</td>
                            <td>@m.CourseYear</td>
                            <td>@m.StartDate</td>
                            <td>@m.EndDate</td>
                            <td>@m.Costs</td>
                            <td>@m.Currency</td>
                            <td>@m.TimeCommit</td>
                            <td>@m.TrainedDuration</td>
                            <td><span>@m.Note</span></td>
                            <td style='display: none;'>@m.TotalRecord</td>
                        </tr>
                    }
                </tbody>
            </table>
            <div class='clear-fix'></div>
        </div>
        <div id='details'>
            @*show popup*@
        </div>
    </div>
    <div id='pop'>
        <div class='acTitle title-view'>
            Selected Fields
        </div>
        <table id='selectedFileds'>
            <tr>
                <td>
                    <input type='checkbox' id='selectAll' />
                    Select all
                </td>
            </tr>
            <tr>
                
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Course Name
                </td>
                
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Course Category</td>
            </tr>
            <tr>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Course Category Name</td>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Course Year</td>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Costs</td>
                <td>
                    <input type='checkbox' class='fields' />
                    Start Date</td>
            </tr>
            <tr>
                <td>
                    <input type='checkbox' class='fields' />
                    End Date</td>
                <td>
                    <input type='checkbox' class='fields' />
                    Currency</td>
                <td>
                    <input type='checkbox' class='fields' />
                    Time Commit</td>
                <td>
                    <input type='checkbox' class='fields' />
                    Trained Duration</td>
            </tr>
           
        </table>
        <div class='btns'>
            "<input type='button' value='Cancel' id='cancelBtn' />
            <input type='button' value='Accept' id='changeFields' />
        </div>
    </div>
    <div class='clear-fix'></div>

    <div class='clear-fix'></div>
    <div id='notes'></div>
</div>


@section Scripts {

  

    <script src="@Url.Content("~/Content/Scripts/jquery.AccountCourse.js")">
    </script>
    <script src="~/Content/Scripts/convertDatetimeJson.js"></script>
    <script type='text/javascript'>
        
        $(document).ready(function () {
            PrepareTree();
            CreateTreeMenuById('tree');
            Initial();

            window.hidden = getColumnsHide('fields');
            // window.objTable = CreateDataTableById('dataTables', window.hidden);
            //ShowPopupByAccoutName('dataTables', 'details', 'notes');
            ClosePopup('btnCloseI', 'details');
            //ChangeTableConfiguration('changeFields', 'dataTables', 'fields', 'wrapper', 'pop', 0, $('#dataTables_length option:selected').text(), objTable.fnGetData(0)[17]);
            //$('.wrapper').addClass('configurationPaging');
            //configurationPaging('dataTables', 0, $('#dataTables_length option:selected').text(), objTable.fnGetData(0)[12]);

            $('#btnSearch').click(function () {

                var courseName = $('#txtCourseName').val();

                var courseYear = $('#txtCourseYear').val();
                if (courseYear == '') {
                    courseYear = 2010;
                }


                $.ajax({
                    url: '/Course/SearchCourse',
                    type: 'POST',
                    data: {
                        categoryId: 0,
                        courseName: courseName,
                        courseYear: courseYear,
                        startDate: $('#txtstartDate').val(),
                        endDate: $('#txtendDate').val(),
                        currentpage: 1,
                        pageSize: 20
                    },
                    dataType: 'json',
                    success: function (data) {


                        var html = "<table width='100%' class='sortable' id='table-result'><thead><tr><th>" +
                            "CourseId</th>" +
                            "<th>Course Name</th>" +
                            "<th>CourseCategoryID</th>" +
                            "<th>Course Category </th>" +
                            "<th>Course CategoryName</th>" +
                            "<th>Course Year </th>" +
                            "<th>Start Date  </th>" +
                            "<th>End Date </th>" +
                            "<th>Costs </th>" +
                            "<th>Currency</th>" +
                            "<th>Time Commit</th>" +
                            "<th>Trained Duration </th>" +
                            "<th>Note</th>" +
                            "</tr></thead><tfoot></tfoot><tbody>";
                        for (var i = 0; i < data.length; i++) {

                            html += "<tr><td>" + data[i].CourseId + "</td>";
                            html += "<td><a class='acc' href='javascript:;' data-courseId='" + data[i].CourseId + "'>" + data[i].CourseName + "</a></td>";
                            html += "<td>" + data[i].CourseCategoryId + "</td>";
                            html += "<td>" + data[i].CourseCategory + "</td>";
                            html += "<td>" + data[i].CourseCategoryName + "</td>";
                            html += "<td>" + data[i].CourseYear + "</td>";
                            html += "<td>";

                            html += "</td>";
                            html += "<td>";

                            html += formatJSONDate(data[i].EndDate);


                            html += "</td>";
                            html += "<td>" + data[i].Costs + "</td>";
                            html += "<td>" + data[i].Currency + "</td>";
                            html += "<td>" + data[i].TimeCommit + "</td>";
                            html += "<td>" + data[i].TrainedDuration + "</td>";
                            html += "<td>" + data[i].Note + "</td></tr>";

                        }

                        html += "</tbody></table>";



                        $('#list-search').html(html);

                        $("#table-result").dataTable({
                            "sDom": '<"wrapper"tpli>',
                            "aLengthMenu": [[20, 50, 100, -1], [20, 50, 100, "All"]],
                            "iDisplayLength": 20,
                            "sPaginationType": "full_numbers",
                            "aaSorting": [[0, "asc"]]
                        });
                    },
                    error: function () {
                        alert('Error!');
                    }
                });
            });


            $('#table-result tr td a').each(function () {
                $(this).on("click", function () {
                    $.ajax({
                        url: '@Url.Action("GetCourseInformationCourseId")',
                        type: 'POST',
                        data: { courseId: $(this).attr('data-courseId') },
                        dataType: 'JSON',
                        success: function (data) {
                            $('#details').empty();
                            var html = "<div class='acTitle'>Course Details</div>";

                            html += "<div id='tabs'><ul><li><a href='#tabs-1'>General</a></li><li><a href='#tabs-2'>Instructor</a></li><li><a href='#tabs-3'>Feedback</a></li><li><a href='#tabs-4'>Course Infomation</a></li></ul>";
                            html += "<div id='tabs-1'><table width='100%'><tr>";
                            html += "<td class='label bold twentyFivePercent'>Course Name</td><td class='twentyFivePercent'>" + data.CourseName + "</td>";
                            html += "<td class='label bold twentyFivePercent'>Couser year </td><td class='twentyFivePercent'>" + data.CourseYear + "</td></tr>";
                            html += "<tr><td class='label bold'>Category </td><td>" + data.CourseCategory + "</td>";
                            html += "<td class='label bold '>Cost </td><td>" + data.Costs + "</td></tr>";
                            html += "<tr><td class='label bold'>Start date </td><td>" + formatJsonDate(data.StartDate) + "</td>";
                            html += "<td class='label bold'>End Date</td><td>";
                            html += formatJsonDate(data.EndDate);
                            html += "</td></tr>";
                            html += "<tr><td class='label bold' >Time Commit</td><td>" + data.TimeCommit + "</td>";
                            html += "<td class='label bold'>Trained duration</td><td>";
                            html += data.TrainedDuration;
                            html += "</td></tr>";
                            html += "<tr><td class='label bold'>Note</td><td> " + data.Note + "</td>";
                            html += "</table></div>";

                            html += "<div id='tabs-2' class='popup-overflow'><table class='popup-tables'><tr>" +
                                "<th>Date</th>" +
                                "<th>Topic name</th>" +
                                "<th>Instructor </th>" +
                                "<th>Type of Training Contribution </th>" +
                                "<th>Duration </th>" +
                                "<th>Point </th>" +
                                "<th>Final Point </th>" +
                                "</tr>";
                            for (var i = 0; i < data.CourseInstructors.length; i++) {
                                html += "<tr><td>" + data.CourseInstructors[i].Date + "</td>";
                                html += "<td>" + data.CourseInstructors[i].TopicName + "</td>";
                                html += "<td>" + data.CourseInstructors[i].Instructor + "</td>";
                                html += "<td>" + data.CourseInstructors[i].TypeOfTrainingContribution + "</td>";
                                html += "<td class='text-right'>" + data.CourseInstructors[i].Duration + "</td>";
                                html += "<td class='text-right'>" + data.CourseInstructors[i].Point + "</td>";
                                html += "<td class='text-right'>" + data.CourseInstructors[i].FinalPoint + "</td></tr>";
                            }
                            html += "</table></div>";

                            html += "<div id='tabs-3' class='popup-overflow'><table class='popup-tables'><tr>" +
                                "<th>Topic</th>" +
                                "<th>Date</th>" +
                                "<th>Instructor</th>" +
                                "<th>Course Objective is met </th>" +
                                "<th>Appropriate course level </th>" +
                                "<th>Course usefulness </th>" +
                                "<th>Training material quality</th>" +
                                "<th>Subject coverage</th>" +
                                "<th>Trainer supporting</th>" +
                                "<th>Good instruction & communication </th>" +
                                "<th>Overall Score</th>" +
                                "</tr>";
                            for (i = 0; i < data.CourseFeedBacks.length; i++) {
                                html += "<tr><td>" + data.CourseFeedBacks[i].Topic + "</td>";
                                html += "<td class='text-right'>" + formatJsonDate(data.CourseFeedBacks[i].Date) + "</td>";
                                html += "<td >" + data.CourseFeedBacks[i].Instructor + "</td>";
                                html += "<td class='text-right'>" + data.CourseFeedBacks[i].CourseObjectIsMet + "</td>";
                                html += "<td class='text-right'>" + data.CourseFeedBacks[i].AppropriateCourseLevel + "</td>";
                                html += "<td class='text-right'>" + data.CourseFeedBacks[i].CourseUsefullness + "</td>";
                                html += "<td class='text-right'>" + data.CourseFeedBacks[i].TrainingMaterialQuality + "</td>";
                                html += "<td class='text-right'>" + data.CourseFeedBacks[i].SubjectCoverage + "</td>";
                                html += "<td class='text-right'>" + data.CourseRefunds[i].TrainerSupporting + "</td>";
                                html += "<td class='text-right'>" + data.CourseRefunds[i].GoodInstructionAndCommunication + "</td>";
                                html += "<td class='text-right'>" + data.CourseRefunds[i].OverAllScore + "</td></tr>";
                            }
                            html += "</table></div>";

                            html += "<div id='tabs-4' class='popup-overflow'><table class='popup-tables'><tr>" +
                                "<th>Employee ID </th>" +
                                "<th>Account Name </th>" +
                                "<th>Fullname</th>" +
                                "<th>Department</th>" +
                                "<th>Job Title</th>" +
                                "<th>Location </th></tr>";
                            for (i = 0; i < data.CourseInfomations.length; i++) {
                                html += "<tr><td class='text-right'>" + data.CourseInfomations[i].EmployeeId + "</td>";
                                html += "<td >" + data.CourseInfomations[i].AccountName + "</td>";
                                html += "<td >" + data.CourseInfomations[i].FullName + "</td>";
                                html += "<td >" + data.CourseInfomations[i].Department + "</td>";
                                html += "<td >" + data.CourseInfomations[i].JobTitle + "</td>";
                                html += "<td >" + data.CourseInfomations[i].Location + "</td> </tr>";
                            }
                            html += "</table></div></div>";
                            $('#details').html(html);
                            $("#tabs").tabs({
                                "show": function (event, ui) {
                                    var table = $.fn.dataTable.fnTables(true);
                                    if (table.length > 0) {
                                        $(table).dataTable().fnAdjustColumnSizing();
                                    }
                                }
                            });
                            $('#details').bPopup();
                        },
                        error: function () {
                            alert('Error!');
                        }
                    });
                });
            });
        })
    </script>
}